<!-- 信息页面展示内容组件 -->
<template>
  <div class="infoShowBtnOut">
    <div class="titleCard" @click="changeExpandHandler">
      <div class="leftArea">
        <slot name="btnIcon">
          <!-- 默认icon -->
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M9 18V42H39V18L24 6L9 18Z" fill="none"></path><path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M19 29V42H29V29H19Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M9 42H39" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
            </g>
          </svg>
        </slot>
        <div class="infoShowTitle">
          {{ infoShowTitle }}
          
        </div>
      </div>
      <div class="rightArea">
        <img v-if="ifExpand" :src="expand">
        <img v-else :src="noExpand">
      </div>
    </div>
    <slot name="contentCard">
      <!-- 默认内容 -->
      <!-- <div class="contentCard" v-if="ifExpand">
        <div class="contentItem">
          <div class="tipText">建成年代：</div>
          <div class="content">2012-2013年</div>
        </div>
        <div class="contentItem">
          <div class="tipText">容积率：</div>
          <div class="content">1.6</div>
        </div>
      </div> -->
    </slot>
  </div>
</template>

<script setup>
import noExpand from '@/assets/img/noExpand.png'
import expand from '@/assets/img/expand.png'

const props = defineProps({
  ifExpand: Boolean,
  infoShowTitle: String
})
const emit = defineEmits(['changeExpandHandler'])
const changeExpandHandler = () => {
  emit('changeExpandHandler')
}
</script>

<style lang="scss" scoped>
  .infoShowBtnOut {
    .titleCard {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      height: 60px;
      margin-top: 18px;
      padding: 0 18px 0 13px;

      display: flex;
      justify-content: space-between;
      align-items: center;

      .leftArea {
        display: flex;
        align-items: center;

        .infoShowTitle {
          font-size: 20px;
          margin-left: 5px;
        }
      }
    }

    .contentCard {
      margin-top: 10px;
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      padding-bottom: 0;

      .contentItem {
        display: flex;
        padding-bottom: 10px;

        .tipText {
          font-weight: 600;
        }
      }
    }
  }
</style>